<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@page import="java.io.*" %>
     <%@page import="mavenWebProject.productsMapper" %>
     <%@page import="mavenWebProject.products" %>
     <%@page import="java.util.*" %>
     <%@page import="javax.servlet.*" %>
     <%@page import="org.apache.ibatis.io.Resources" %>
     <%@page import="org.apache.ibatis.session.SqlSession"%>
     <%@page import="org.apache.ibatis.session.SqlSessionFactory" %>
     <%@page import="org.apache.ibatis.session.SqlSessionFactoryBuilder" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Details</title>
</head>

<style>
    div[id="anvbottom"]{
        position:absolute ;
        top:0%;
        left:0%;
        right: 0%;
        width:100%;
        height:150px;
        background-color: rgba(255, 255, 255);
        z-index: -1;
            
    }
        button[id="cancelSearch"]{
            position: absolute;
            font-size: 20px;
            right:60px;
            top:50px;
            padding: 5px;
            border-radius: 10px;
            background-color: rgba(255, 0, 0, 0.6);
            text-decoration: none;
            border: 0px;
        }button[id="cancelSearch"]:hover{
            color:rgb(255, 255, 255);
            padding: 8px;
        }button[id="cancelSearch"]:link{
            color:rgb(255, 255, 255);
        }
        div[id="inputDiv"]{
            position: absolute;
            top:50px;
            left:600px;
        }
        input[id="searchButton"]{
            padding:8px;
            border-radius: 8px;
            border:none;
            color:rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.1);
        }
        input[type="text"]{
            padding:8px;
            width:300px;
            height:20px;
            border-radius: 8px;
            opacity: 0.8;
        }
        a[id="locateTo1"]{
            color:white;
            text-decoration: none;
            margin:15px;
            font-size: 18px;
            font-family: fantasy;
        }
        a[id="locateTo2"]{
            color:white;
            text-decoration: none;
            margin:15px;
            font-size: 18px;
            font-family: fantasy;
        }
        a[id="locateTo3"]{
            color:white;
            text-decoration: none;
            margin:15px;
            font-size: 18px;
            font-family: fantasy;
        }
        a[id="locateTo4"]{
            color:white;
            text-decoration: none;
            margin:15px;
            font-size: 18px;
            font-family: fantasy;
        }
        a[id="locateTo5"]{
            color:white;
            text-decoration: none;
            margin:15px;
            font-size: 18px;
            font-family: fantasy;
        }
    div[id="anv0"]{
        position:absolute ;
        top:0%;
        left:0%;
        right: 0%;
        width:100%;
        height:120px;
        background-color: rgba(222, 240, 255,0);
        z-index:999;
    }
    div[id="anv0"]:hover{
        background-color: rgb(255, 255, 255);
    }
        div[id="anv0-1"]{
            position: absolute;
            top:45px;
            left:35px;
            width:150px;
            height:55px;
        }
        p[id="brandName"]{
            font-size: 40px;
            color: white;
            font-family:fantasy;
            margin: 0px;
        }
        button[id="showSearch"]{
            color:white;
            font-size:18px;
            width:40x;
            border:none;
            margin: 0px;
            background-color: rgb(0,0,0,0);
        }button[id="showSearch"]:hover{
        	background-color:rgb(0,0,0,0.6);
        	width:60px;
        	border-radius:10px;
        	padding:8px;
        }
        a[id="randomP1"]{
            color:white;
            font-size:20px;
            font-weight: bold;
            margin: 0px;
        }a[id="randomP1"]:hover{
        	background-color:rgb(0,0,0,0.6);
        	width:50px;
        	border-radius:10px;
        	padding:10px;
        }
        a[id="randomP2"]{
            color:white;
            width:100px;
            font-size:20px;
            font-weight: bold;
            margin: 0px;
        }a[id="randomP2"]:hover{
        	background-color:rgb(0,0,0,0.6);
        	width:100px;
        	color:black;
        	border-radius:10px;
        	padding:10px;
        }
        a:link{
            text-decoration: none;
        }
        div[id="anv2"]{
            position: absolute;
            top:0px;
            left:0%;
            height:800px;
            width:auto;
        }
        p[id="anv2-p1"]{
            position: absolute;
            top:750px;
            left:10px;
            color:white;
            font-size: 30px;
            font-family:fantasy;
            margin:20px;
        }


    p[id="showAllProducts-p"]{
        position: absolute;
        top:960px;
        left:620px;
        font-size:50px;
        font-family: fantasy;
        margin:0px;
        color: black;
    }
    table[id="showAllProductsTable"]{
    	position:absolute;
    	left:80px;
    	top:1100px;
    }
    	p[id="products"]{
    		font-family:cursive;
	        color:rgb(0, 0, 0);
	        font-size: 16px;
    	}

</style>

<body>
    
    <%
    	request.setCharacterEncoding("UTF-8");
    	String comingFrom=request.getParameter("root");
    %>
    
    <div id="anvbottom">
    	<div id="inputDiv">
            <input type="text" id="searchContext">
            &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onClick="searchSubmit()" id="searchButton" value="查找">
        </div>
        <button href="#" id="cancelSearch" onClick="cancelSearch()">×</button>
    </div>
    <div id="anv0">
        <table border="0">
            <tr>
                <td width="50px" height="40px">&nbsp;</td>
                <td width="20px">&nbsp;</td>
                <td width="90px">&nbsp;</td>
                <td width="60px">&nbsp;</td>
                <td rowspan="2" width="1100px" align="center" valign="middle">
                    <p id="brandName">B U Y&nbsp;&nbsp;&nbsp;I T&nbsp;&nbsp;&nbsp;S H O P</p>
                </td>
                <td width="200px">&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><label for="showSearch"><img id="searchImg" src="Imgs/search1.png" width="20px" height="20px"></label></td>
                <td ><button id="showSearch" onClick="showSearch()">搜索</button></td>
                <td></td>
                <td><a id="randomP1" onclick="backToMainScene()">首页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a id="randomP2" onclick="goPersonalDetails()">个人中心</a></td>
            </tr>
            <tr>
                <td height="30px">&nbsp;</td>
                <td></td>
                <td></td>
                <td></td>
                <td align="center" valign="middle">
                    <a id="locateTo1" href="productsDetails.jsp?root=all">ALL</a> 
                    <a id="locateTo2" href="productsDetails.jsp?root=man">MAN-CLOTHING</a>
                    <a id="locateTo3" href="productsDetails.jsp?root=female">FEMALE-CLOTHING</a>
                    <a id="locateTo4" href="productsDetails.jsp?root=bag">BAG</a>
                    <a id="locateTo5" href="productsDetails.jsp?root=jewelry">JEWELRY</a>
                </td>
                <td></td>
            </tr>
        </table>
    </div>
    <div id="anv2">
        <video src="viedo/1.mp4" height="auto" width="1520px" autoplay="autoplay" muted="true" loop="loop" style="z-index:-99"></video>
    </div>
    <p id="anv2-p1">The Trend Of Choice <br>Choice Of Quality </p>

    
    <p id="showAllProducts-p"><%
    	if(comingFrom.contentEquals("all")){
    		out.println("All Products");
    	}else if(comingFrom.contentEquals("man")){
    		out.println("Man Clothing");
    	}else if(comingFrom.contentEquals("female")){
    		out.println("Female Clothing");
    	}else if(comingFrom.contentEquals("bag")){
    		out.println("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bag");
    	}else if(comingFrom.contentEquals("jewelry")){
    		out.println("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Jewelry");
    	}
    %></p>
    <table id="showAllProductsTable" border="0" cellspacing="8px">
    	<%
        	//1.加载mybatis的核心配置文件，获取sqlsessionfactory
    		String resource = "mybatis-config.xml";
    		InputStream inputStream = Resources.getResourceAsStream(resource);
    		SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
    		//2.获取sqlsession对象，用它来执行sql
    		SqlSession sqlsession=sqlSessionFactory.openSession();
    		//3.获取mapper接口的代理对象
    		productsMapper mapper=sqlsession.getMapper(productsMapper.class);
    		//4.执行方法
    		request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");
    		List<products> products=mapper.selectAll();
	    	String search=request.getParameter("search");
    		String name="";int price=0;String img="";String kind="";int status=1;String for_group="";int count=0;int id=-1;
    		for(int i=0;i<products.size();i++){
    			products s=products.get(i);
    			name=s.getName().trim();price=s.getPrice();img=s.getImg().trim();kind=s.getKind().trim();status=s.getStatus();for_group=s.getFor_group().trim();
    			id=s.getId();status=s.getStatus();
    			if(status==1){
	    			if(kind.contentEquals("clothing") && for_group.contentEquals("w")){
	    				img="shopCenterImgs/female-clothing/"+img;
	    			}else if(kind.contentEquals("clothing") && for_group.contentEquals("m")){
	    				img="shopCenterImgs/man-clothing/"+img;
	    			}else if(kind.contentEquals("bag")){
	    				img="shopCenterImgs/bag/"+img;
	    			}else if(kind.contentEquals("jewelry")){
	    				img="shopCenterImgs/jewelry/"+img;
	    			}
	    			if(search==null){
		    			if(comingFrom.contentEquals("all")){
		    				out.println("<td width='450px' height='400px'><a target='_blank' href='purchase.jsp?product="+name+"'><img src="+img+" width='400px' height='400px' style='border-radius:5px'></a><p id='products'>"+name+"</p><p id='products'>￥ "+price+"</p></td>");
		        			count++;
		    			}else if(comingFrom.contentEquals("man")){
		    				if(for_group.contentEquals("m") && kind.contentEquals("clothing")){
		    					out.println("<td width='450px' height='400px'><a target='_blank' href='purchase.jsp?product="+name+"'><img src="+img+" width='400px' height='400px' style='border-radius:5px'></a><p id='products'>"+name+"</p><p id='products'>￥ "+price+"</p></td>");
		    	    			count++;
		    				}
		    			}else if(comingFrom.contentEquals("female")){
		    				if(for_group.contentEquals("w") && kind.contentEquals("clothing")){
		    					out.println("<td width='450px' height='400px'><a target='_blank' href='purchase.jsp?product="+name+"'><img src="+img+" width='400px' height='400px' style='border-radius:5px'></a><p id='products'>"+name+"</p><p id='products'>￥ "+price+"</p></td>");
		    	    			count++;
		    				}
		    			}else if(comingFrom.contentEquals("bag")){
		    				if(kind.contentEquals("bag")){
		    					out.println("<td width='450px' height='400px'><a target='_blank' href='purchase.jsp?product="+name+"'><img src="+img+" width='400px' height='400px' style='border-radius:5px'></a><p id='products'>"+name+"</p><p id='products'>￥ "+price+"</p></td>");
		    	    			count++;
		    				}
		    			}else if(comingFrom.contentEquals("jewelry")){
		    				if(kind.contentEquals("jewelry")){
		    					out.println("<td width='450px' height='400px'><a target='_blank' href='purchase.jsp?product="+name+"'><img src="+img+" width='400px' height='400px' style='border-radius:5px'></a><p id='products'>"+name+"</p><p id='products'>￥ "+price+"</p></td>");
		    	    			count++;
		    				}
		    			}
	    			}else{
	    				if(name.contains(search) || kind.contains(search)){
	    					out.println("<td width='450px' height='400px'><a target='_blank' href='purchase.jsp?product="+name+"'><img src="+img+" width='400px' height='400px' style='border-radius:5px'></a><p id='products'>"+name+"</p><p id='products'>￥ "+price+"</p></td>");
	    					count++;
	    				}else if(search.contains("包") || search.contains("袋")){
	    					if(kind.contentEquals("bag")){
		    					out.println("<td width='450px' height='400px'><a target='_blank' href='purchase.jsp?product="+name+"'><img src="+img+" width='400px' height='400px' style='border-radius:5px'></a><p id='products'>"+name+"</p><p id='products'>￥ "+price+"</p></td>");
		    					count++;
	    					}
	    				}else if(search.contains("男")){
	    					if(kind.contentEquals("clothing") && for_group.contentEquals("m")){
		    					out.println("<td width='450px' height='400px'><a target='_blank' href='purchase.jsp?product="+name+"'><img src="+img+" width='400px' height='400px' style='border-radius:5px'></a><p id='products'>"+name+"</p><p id='products'>￥ "+price+"</p></td>");
		    					count++;
	    					}
	    				}else if(search.contains("衣") && search.contains("女")){
	    					if(kind.contentEquals("clothing") && for_group.contentEquals("w")){
		    					out.println("<td width='450px' height='400px'><a target='_blank' href='purchase.jsp?product="+name+"'><img src="+img+" width='400px' height='400px' style='border-radius:5px'></a><p id='products'>"+name+"</p><p id='products'>￥ "+price+"</p></td>");
		    					count++;
	    					}
	    				}else if(search.contains("衣")){
	    					if(kind.contentEquals("clothing")){
		    					out.println("<td width='450px' height='400px'><a target='_blank' href='purchase.jsp?product="+name+"'><img src="+img+" width='400px' height='400px' style='border-radius:5px'></a><p id='products'>"+name+"</p><p id='products'>￥ "+price+"</p></td>");
		    					count++;
	    					}
	    				}else if(search.contains("宝") || search.contains("钻") || search.contains("环") || search.contains("金") || search.contains("银") || search.contains("耳")){
	    					if(kind.contentEquals("jewelry")){
		    					out.println("<td width='450px' height='400px'><a target='_blank' href='purchase.jsp?product="+name+"'><img src="+img+" width='400px' height='400px' style='border-radius:5px'></a><p id='products'>"+name+"</p><p id='products'>￥ "+price+"</p></td>");
		    					count++;
	    					}
	    				}else if(search.contains("女")){
	    					if(for_group.contentEquals("w") || for_group.contentEquals("a")){
		    					out.println("<td width='450px' height='400px'><a target='_blank' href='purchase.jsp?product="+name+"'><img src="+img+" width='400px' height='400px' style='border-radius:5px'></a><p id='products'>"+name+"</p><p id='products'>￥ "+price+"</p></td>");
		    					count++;
	    					}
	    				}
	    			}
    			}else{
    			}
    			if(count%3==0){
   					out.println("<tr></tr>");
    			}
   			}
   			//6.释放资源
    		sqlsession.close();
       	%>
</table>

    <script>
    
    	const comingFrom="<%=comingFrom%>";
    	if(comingFrom=="all"){
    		
    	}else if(comingFrom=="man"){
    		
    	}else if(comingFrom=="female"){
    		
    	}else if(comingFrom=="bag"){
    		
    	}else if(comingFrom=="jewelry"){
    		
    	}

        const searchImgEvent=document.getElementById("anv0");
        searchImgEvent.onmouseenter=function(){
            document.getElementById("searchImg").src="Imgs/search2.png";
            document.getElementById("brandName").style.color="black";
            document.getElementById("showSearch").style.color="black";
            document.getElementById("randomP1").style.color="black";
            document.getElementById("randomP2").style.color="black";
            document.getElementById("locateTo1").style.color="black";
            document.getElementById("locateTo2").style.color="black";
            document.getElementById("locateTo3").style.color="black";
            document.getElementById("locateTo4").style.color="black";
            document.getElementById("locateTo5").style.color="black";
        }
        searchImgEvent.onmouseleave=function(){
            document.getElementById("searchImg").src="Imgs/search1.png";
            document.getElementById("brandName").style.color="white";
            document.getElementById("showSearch").style.color="white";
            document.getElementById("randomP1").style.color="white";
            document.getElementById("randomP2").style.color="white";
            document.getElementById("locateTo1").style.color="white";
            document.getElementById("locateTo2").style.color="white";
            document.getElementById("locateTo3").style.color="white";
            document.getElementById("locateTo4").style.color="white";
            document.getElementById("locateTo5").style.color="white";
        }

    function cancelSearch(){
        document.getElementById("anvbottom").style.zIndex=-1;
        document.getElementById("anv0").style.zIndex=999;
    }

    function showSearch(){
        document.getElementById("anvbottom").style.zIndex=999;
        document.getElementById("anv0").style.zIndex=-1;
    }
    
    function backToMainScene(){
    	window.location.href="mainScene.jsp";
    }
    
    function searchSubmit(){
    	const str=document.getElementById("searchContext").value;
    	const href="productsDetails.jsp?root=all&search="+str;
    	window.location.href=href;
    }
    function goPersonalDetails(){
    	window.location.href="personalDetails.jsp";
    }

    </script>

</body>
</html>